<template>
  <div class="kSelect searchSelect">
    <el-select
      v-model="modelValue"
      :style="customStyle"
      filterable
      :clearable="clearable"
      v-bind="$attrs"
      :placeholder="placeholder"
      @input="$emit('input',$event)"
      @change="update"
    >
      <el-option
        v-for="item in selectOpations"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      />
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'KSelect',
  inheritAttrs: false,
  props: {
    value: { // 选中的选项标识
      type: [String, Number],
      default: undefined

    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    customStyle: {
      type: Object,
      default() {
        return {}
      }
    },
    selectParams: { // options需要数据
      type: [Array, Object],
      default: () => [
      ]
    },
    customParams: {
      type: Object,
      default() {
        return {
          opations: [],
          label: '',
          value: ''
        }
      }
    },
    clearable: {
      type: Boolean,
      default() {
        return true
      }
    },
  },
  data() {
    return {
      modelValue: this.value // 双向数据绑定数据
    }
  },
  computed: {
    selectOpations() {
      if (this.selectParams.length === 0) {
        const arr = []
        const { opations, label, value } = this.customParams
        opations.forEach((item, index) => {
          arr[index] = {
            label: item[label],
            value: item[value]
          }
        })
        return arr
      } else {
        return this.selectParams
      }
    }
  },
  watch: {
    value(newVal) {
      this.modelValue = newVal
    }
  },
  methods: {
    update(value) {
      this.$emit('handleSelectEvent', value)
    }
  }
}
</script>

<style lang="scss">  //不要加scoped
$defaultColor:#F8F7FB;
$select-borderColor-focus: #F8F7FB;
$select-optionFontColor: #3b425d;
.kSelect{
  position: relative;
  font-size: 14px;
  display:inline-block;
  P{
      float: left;
  }
  .el-select,.el-cascader{
    font-size:24px;
    .el-input{
      font-size: 14px;
      .el-input__inner{
        background-color: $defaultColor;
        padding-right: 3px;
        border-radius: 8px;
        border: none;
        height: 48px;
        line-height: 48px;
        padding: 15px;
      }
      .el-input__inner:focus{
        border-color:$select-borderColor-focus
      }
      .el-input__suffix{
        right: 5px;

      }
      .el-select__caret{
        font-size: 14px;
        line-height: 32px;
        width: 25px;
      }
    }
    .el-input.is-focus .el-input__inner{
        border-color:$select-borderColor-focus
    }
  }
}
// 下拉框样式
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
    color:$select-optionFontColor;
}
.el-select-dropdown__item.selected{
    color:$select-optionFontColor;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    color: $select-optionFontColor;
}
.searchSelect{
    font-size: 14px;
    display:inline-block;
    height: auto;
}
</style>
